<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: Sam
 * @Date: 2022-04-07 20:18:30
 * @LastEditors: Sam
 * @LastEditTime: 2022-05-05 22:52:27
-->
<template>
    <div class="app-container">
        <el-card>
            <div slot="header" class="clearfix">
                <span>秒杀订单列表</span>
            </div>
             <div class="filter-container">
                    <el-select v-model="listQuery.aid" placeholder="请选择活动" clearable style="width: 200px;margin-right: 10px;" class="filter-item" @keyup.enter.native="handleFilter" >
                        <el-option  v-for="item in bargain_list" :key="item.id" :label="item.title" :value="item.id"></el-option>
                    </el-select>
                    <el-input v-model="listQuery.user" placeholder="请输入用户" clearable style="width: 200px;margin-right: 10px;margin-bottom:10px" class="filter-item" @keyup.enter.native="handleFilter" />
                    <el-input v-model="listQuery.order_sn" placeholder="请输入订单编号" clearable style="width: 200px;margin-right: 10px;margin-bottom:10px" class="filter-item" @keyup.enter.native="handleFilter" />
            
                    <el-select v-model="listQuery.pay_status" placeholder="请选择支付状态" clearable style="width: 200px;margin-right: 10px;" class="filter-item" @keyup.enter.native="handleFilter" >
                        <el-option  label="未支付" :value="0"></el-option>
                        <el-option  label="已支付" :value="1"></el-option>
                        <el-option  label="已过期" :value="-1"></el-option>
                    </el-select>

                <el-button v-waves  class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                {{ '搜索' }}
                </el-button>
                 
                
                <el-button v-waves :disabled="!checkPermission(['seckill.seckill_order_export'])"  type="success" icon="el-icon-upload2" @click="handleExport">
                {{ '导出' }}
                </el-button>
                
            </div>
             <el-table
                v-loading="listLoading"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                :data="list"
                border
                fit
                highlight-current-row
                style="width: 100%"
                size="mini"
                >  

            <el-table-column  align="center" label="活动">
                <template slot-scope="scope">
                    <span>{{ scope.row.activity.title }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="用户">
                <template slot-scope="scope">
                    <span>{{ scope.row.nickname }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="订单编号">
                <template slot-scope="scope">
                    <span>{{ scope.row.order_sn }}</span>
                </template>
            </el-table-column>

   
            <el-table-column  align="center" label="创建时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.create_time }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="支付状态">
                <template slot-scope="scope">
                    <span>{{ scope.row.pay_status }}</span>
                </template>
            </el-table-column>
         
            <el-table-column  align="center" label="支付时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.pay_time | parseTime }}</span>
                </template>
            </el-table-column>
            </el-table>

            <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
        </el-card>

    </div>
</template>
<style scoped>
    .import {
        display: inline-block;
        margin-left: 5px;
    }
</style>
<script>
    import {export_excell} from '@/api/export_excell' // 导出
    import waves from '@/directive/waves' // waves directive
    import permission from '@/directive/permission/index.js' // 权限判断指令
    import checkPermission from '@/utils/permission' // 权限判断函数
    import { list } from '@/api/seckill_order' // api接口
    import { parseTime } from '@/utils' // 时间格式化函数
    import Pagination from '@/components/Pagination' // 分页组件
    export default{
        name: 'seckill_order',
        components: { Pagination }, // 引入组件
        filters: {
            parseTime // 时间过滤器
        },
        directives: { waves, permission }, // 引入指令
          data() {
            return {
            bargain_list: [],
            list: null, // 列表数据
            total: 0, // 总条数
            listLoading: true, //加载loadig
            listQuery: { //列表查询参数
                page: 1,
                limit: 10
            },
           
            detail: { // 详情
                dialogVisible: false,
                data: []
            },
          
            }
        },
          created() {
            this.getList()
        },
        methods: {
          
 
            handleExport(){
                export_excell(process.env.VUE_APP_BASE_API + 'admin/seckill_order_export',this.listQuery);
            },
            checkPermission, // 权限判断函数
            handleFilter() { // 查询
                this.listQuery.page = 1
                this.getList()
            },
      
  
            handleDetail(index, row) { // 详情
                detail(row.id).then((res) => {
                        this.detail.dialogVisible = true
                        const data = res.data
                        this.detail.data = [
                                          {
                    name:"活动",
                    content:data.activity.title,
                    type: "text"
                },
                {
                    name:"用户",
                    content:data.nickname,
                    type: "text"
                },
                {
                    name:"订单编号",
                    content:data.order_sn,
                    type: "text"
                },
                {
                    name:"砍价成功价格",
                    content:data.price,
                    type: "text"
                },
                {
                    name:"砍价状态",
                    content:data.status_text,
                    type: "text"
                },
                {
                    name:"创建",
                    content:data.create_time,
                    type: "text"
                },
                {
                    name:"支付状态",
                    content:data.pay_status,
                    type: "text"
                },
                {
                    name:"参与人数",
                    content:data.bargain_user,
                    type: "text"
                },
                {
                    name:"支付时间",
                    content:data.pay_time,
                    type: "text"
                },
                {
                    name:"交易号",
                    content:data.transaction_id,
                    type: "text"
                },
                {
                    name:"支付金额",
                    content:data.total_fee,
                    type: "text"
                },

                        ]
                    })
                    },
            getList() { // 获取列表
                this.listLoading = true
                list(this.listQuery).then(response => {
                        this.list = response.data.data
                        this.total = response.data.total
                        this.bargain_list = response.data.bargain;
                        this.listLoading = false
                    })
                },
            }
    }
</script>

